<template>
  <div class="app-container">
    <div class="head-container">
      <!-- 列表页上方按钮 -->
      <el-button
        slot="left"
        v-permission="['admin', 'storage:add']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="mainadd = true"
        >添加</el-button
      >
      <el-button
        slot="left"
        v-permission="['admin', 'storage:add']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="modifybtn()"
        >修改</el-button
      >
    </div>

    <!-- 添加弹框  添加-->
    <el-dialog :visible.sync="mainadd" width="620px">
      <el-form
        :inline="true"
        :model="defaultForm1"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="系统编号" prop="systemId">
          <el-input v-model="number" disabled placeholder="提交后生成" />
        </el-form-item>
        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="title" />
        </el-form-item>
        <el-form-item label="标签值" prop="tagValue">
          <el-checkbox-group v-model="labels">
            <el-checkbox
              v-for="labels in labellist"
              :key="labels"
              :label="labels"
              >{{ labels }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="mainadd = false">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="add()"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加弹框  修改-->
    <el-dialog :visible.sync="modify" width="620px">
      <el-form
        :inline="true"
        :model="defaultForm"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="系统编号" prop="systemId">
          <el-input v-model="number1" disabled placeholder="提交后生成" />
        </el-form-item>
        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="title1" />
        </el-form-item>
        <el-form-item label="标签值" prop="tagValue">
          <el-checkbox-group v-model="labels1">
            <el-checkbox
              v-for="labels in labellist"
              :key="labels"
              :label="labels"
              >{{ labels }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="modify = false">取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="modifyadd()"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 列表页 -->
    <el-table
      ref="table"
      :data="listdata"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="systemId"
        label="系统编号"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="systemName"
        label="系统名称"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="tagValue"
        label="标签"
      />
    </el-table>
  </div>
</template>
<script>
import getsafeRequirement from "@/api/system/main";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import Treeselect from "@riophae/vue-treeselect";
import DateRangePicker from "@/components/DateRangePicker";
import { mapGetters } from "vuex";

export default {
  name: "User",
  components: {
    Treeselect,
    DateRangePicker,
  },
  cruds() {
    return CRUD({
      title: "安全",
      url: "api/safeSystem/query",
      //   params: {
      //     docType: "0",
      //   },
      crudMethod: { ...getsafeRequirement },
    });
  },
  mixins: [presenter(), header(), form(), crud()],
  data() {
    return {
      defaultForm: {},
      modify: false, // 修改弹框
      title: "", // 标题
      number: [], // 编号
      labels: [], // 标签值
      title1: "", // 标题
      number1: [], // 编号(修改)
      labels1: [], // 标签值(修改)
      labellist: [], // 标签管理(修改)
      modifyid: "", // 修改id
      rules: [],
      type: [],
      listdata: [],
      mainadd: false, // 添加
      mapplist: [], // 列表展示
      tableitemid: [], // 树形图id
      list1: [],
      defaultProps: { children: "children", label: "name" },
      permission: {
        postcreate: ["admin", "user:postcreate"],
      },
    };
  },
  computed: {
    ...mapGetters(["user", "documentApi"]),
  },
  mounted() {
    this.label();
    // 系统列表
    const list = [];
    getsafeRequirement
      .getsafeSystem({
        // todo  应该是需要传参的
      })
      .then((res) => {
        console.log(res);
        this.listdata = res;
      })
      .catch((err) => {
        // 应该是没传参的问题  进catch了
        console.log("1113");
        // data.enabled = !data.enabled;
      });
  },
  methods: {
    label() {
      getsafeRequirement
        .getlabel({
          // todo  应该是需要传参的
        })
        .then((res) => {
          console.log(res);
          this.labellist = res;
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
    },
    // 新增系统
    add() {
      const resources = {
        systemId: 0,
        systemName: this.title,
        tagValue: this.labels,
      };
      console.log(resources);
      debugger;
      getsafeRequirement
        .postcreate(resources)
        // todo  应该是需要传参的
        .then((res) => {
          console.log(res);
          this.mainadd = false;
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
      parent.location.reload();
    },
    handleSelectionChange(res) {
      console.log(res);
      this.defaultForm = res;
      console.log(this.defaultForm);
    },
    // 修改值反显
    modifybtn(data) {
      this.modify = true;
      data = this.defaultForm;
      this.number1 = data[0].systemId;
      this.title1 = data[0].systemName;
      this.labels1 = JSON.parse(data[0].tagValue);
      // this.modifyadd(data);
    },
    //修改接口
    modifyadd(data1) {
      debugger;
      data1 = this.defaultForm;
      this.modifyid = data1[0].systemId;
      const resources = {
        id: data1[0].id,
        // systemId: this.modifyid,
        systemName: this.title1,
        tagValue: this.labels1,
      };
      getsafeRequirement
        .putedit(resources)
        .then((res) => {
          this.modify = false;
          console.log(res);
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
      parent.location.reload();
    },
  },
};
</script>
